<template>
  <div>
    <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
      <el-form-item label="自习室">
        <el-autocomplete
            v-model="roomNo"
            :fetch-suggestions="roomQuerySearchAsync"
            placeholder="请输入自习室编号"
            @select="roomHandleSelect"
        ></el-autocomplete>
      </el-form-item>
      <el-form-item label="订单状态">
        <el-select v-model="queryInfo.dataStatus" placeholder="订单状态">
          <el-option label="有效" value="true"></el-option>
          <el-option label="退款" value="false"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          prop="id"
          label="订单号"
          width="180">
      </el-table-column>
      <el-table-column
          prop="userName"
          label="用户名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="roomNo"
          label="自习室编号">
      </el-table-column>
      <el-table-column
          prop="typeName"
          label="自习室类型">
      </el-table-column>
      <el-table-column
          prop="startTime"
          label="开始时间">
      </el-table-column>
      <el-table-column
          prop="endTime"
          label="结束时间">
      </el-table-column>
      <el-table-column
          prop="price"
          label="消费">
      </el-table-column>
      <el-table-column
          prop="dataStatus"
          label="订单状态">
        <template slot-scope="scope">
          {{scope.row.dataStatus ===false?'退款':'有效'}}
        </template>
      </el-table-column>
      <el-table-column
          label="操作">
        <template slot-scope="scope" v-if="scope.row.dataStatus ===true">
          <el-button
              size="mini"
              @click="handleEnable(scope.$index, scope.row)">退款</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="float: right;margin: 10px">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40]"
          layout="sizes, prev, pager, next"
          :total="dataCount">
      </el-pagination>
    </div>
  </div>
</template>

<script>


import {doGetOrder, doUpdateOrder} from "@/api/order";
import {doGetUserByName} from "@/api/user";
import {doGetRoomByName} from "@/api/room";
import {doGetAllRoomType} from "@/api/roomType";

export default {
  name: "index",
  data() {
    return {
      page:{pageIndex:1,pageSize:10},
      dataCount:10,
      queryInfo: {
        roomId: '',
        useTime: '',
        dataStatus: '',
        token:window.localStorage.getItem("token")
      },
      tableData: [],
      allUser:[],
      allRoom:[],
      userName:'',
      roomNo:''
    }
  },
  methods: {
    getTableData(){
      this.addDialog=false;
      this.updateDialog=false;
      const obj = {
        pageIndex: this.page.pageIndex,
        pageSize: this.page.pageSize,
        queryInfo: this.queryInfo
      }
      if (this.roomNo==''){
        this.queryInfo.roomId=''
      }
      if (this.userName==''){
        this.queryInfo.userId=''
      }
      doGetOrder(obj).then(res=>{
        if (res.code===200){
          this.dataCount=res.data.total;
          this.tableData = res.data.records;
        }
      })
    },
    onSubmit() {
      this.getTableData();
    },
    handleSizeChange(val) {
      this.page.pageSize=val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.page.pageIndex=val;
      this.getTableData();
    },
    handleEnable(index, row){
      this.$confirm(row.dataStatus?'此操作将该订单退款, 是否继续?':'此操作将启用该自习室, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        doUpdateOrder(row.id).then(res=>{
          if (res.code===200){
            this.getTableData();
          }
        })
      })
    },
    userHandleSelect(item){
      this.queryInfo.userId=item.id;
      this.userName=item.value;
    },
    userQuerySearchAsync(queryString, cb){
      const results = [];
      doGetUserByName(queryString).then(res=>{
        if (res.code===200&&res.data.length>0){
          for (let i = 0; i < res.data.length; i++) {
            const element = res.data[i];
            results.push({
              value: element.name,
              id: element.value
            })
          }
        }
      })
      cb(results);
    },
    roomHandleSelect(item){
      this.queryInfo.roomId=item.id;
      this.roomNo=item.value;
    },
    roomQuerySearchAsync(queryString, cb){
      const results = [];
      doGetRoomByName(queryString).then(res=>{
        if (res.code===200&&res.data.length>0){
          for (let i = 0; i < res.data.length; i++) {
            const element = res.data[i];
            results.push({
              value: element.name,
              id: element.value
            })
          }
        }
      })
      cb(results);
    }
  },
  mounted() {
    this.getTableData();
    doGetAllRoomType().then(res=>{
      if (res.code===200){
        this.allType=res.data;
      }
    })
  }

}
</script>

<style lang="less"  scoped>

</style>